@import "../../style/base.styl"

$infoBoxHeight = 56rem

.image-card {
  position relative
  width 100%
  height 100%
  box-shadow 1rem 2rem 3rem var(--shadow-color)
  box-sizing border-box
  padding-bottom $infoBoxHeight
  user-select none

  &.checked, &:hover {
    box-shadow 0 0 10rem #666
  }

  &.listing {
    display flex
    justify-content flex-start
    align-items center
    padding 5rem
    border-radius $box-border-radius

    .image-box {
      height 45rem
      width 45rem
    }

    .info-box {
      position relative
      width 80%
    }

    :deep(.el-loading-mask) {
      .el-loading-spinner {
        margin-top -25rem

        .circular {
          height 24rem
          width 24rem
        }

        .el-loading-text {
          margin 0
        }
      }

    }
  }


  .image-box {
    position relative
    width 100%
    height 100%

    img {
      width 100%
      height 100%
      object-fit cover
      cursor pointer
    }
  }


  .info-box {
    width 100%
    height $infoBoxHeight
    position absolute
    bottom 0
    left 0

    .image-info {
      width 100%
      height 100%
      padding 5rem
      color var(--default-text-color)
      box-sizing border-box
      display flex
      flex-direction column
      justify-content space-between

      .rename-input {
        height 20rem
        display flex

        :deep(input) {
          height 20rem
        }
      }

      .filename {
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        font-size 13rem
      }

      .image-operation {
        margin-top 5rem
      }
    }
  }


  .operation-box {
    position absolute
    top 10rem
    right 8rem
    width calc(100% - 16rem)
    display flex
    justify-content space-between

    .operation-left {
      .picked-btn {
        i {
          font-weight bold
        }
      }
    }

    .operation-right {
      display flex
    }

    .btn {
      width 32rem
      height 32rem
      border-radius 50%
      box-shadow 0 0 6rem #555
      cursor pointer
      background var(--background-color)
      display flex
      justify-content center
      align-items center
      margin-right 8rem
      font-size 18rem

      &:last-child {
        margin-right 0
      }
    }
  }


}
